<template>
  <Dialog class="report-dialog" v-model="visiable" :title="formTitle" style="max-width: 1000px;" width="70%" @submit="onSubmit">
    <TitleText class="report-dialog-title" title="带队民警" subTitle>
      <el-button type="primary" :icon="Plus" @click="onAddLeader">选择民警</el-button>
    </TitleText>
    <el-form class="table-form" :model="leaderFormData" ref="leaderFormRef" label-suffix="：">
      <el-table :data="leaderFormData.tableData" :max-height="540" border empty-text="请选择民警">
        <el-table-column type="index" label="序号" width="60" />
        <el-table-column prop="zzmc" label="单位" min-width="130" />
        <el-table-column prop="mjjh" label="警号" min-width="100" />
        <el-table-column prop="mjmc" label="姓名" min-width="120" />
        <el-table-column prop="mjhh" label="呼号" min-width="120" />
        <el-table-column label="联系电话" width="200">
          <template #default="{ row, $index }">
            <el-form-item :prop="`tableData.${$index}.lxdh`">
              <el-input v-model="row.lxdh" clearable />
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="60">
          <template #default="{ row, $index }">
            <el-popconfirm title="确认删除吗？" :hide-after="0" @confirm="onDeleteLeader($index)">
              <template #reference>
                <el-button link type="danger">删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </el-form>
    <TitleText class="report-dialog-title" title="队伍信息" subTitle>
      <el-button type="primary" :icon="Plus" plain @click="onAddGroup">手动添加</el-button>
      <el-button type="primary" :icon="Plus" @click="onAddGroup">选择民警</el-button>
    </TitleText>
    <el-form class="table-form" :model="groupFormData" ref="groupFormRef" label-suffix="：">
      <el-table :data="groupFormData.tableData" :max-height="540" border empty-text="请添加协同力量">
        <el-table-column type="index" label="序号" width="60" />
        <el-table-column prop="zzmc" label="单位" min-width="130" />
        <el-table-column prop="mjjh" label="警号" min-width="100" />
        <el-table-column prop="mjmc" label="姓名" min-width="120" />
        <el-table-column label="联系电话" width="200">
          <template #default="{ row, $index }">
            <el-form-item :prop="`tableData.${$index}.lxdh`">
              <el-input v-model="row.lxdh" clearable />
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="60">
          <template #default="{ row, $index }">
            <el-popconfirm title="确认删除吗？" :hide-after="0" @confirm="onDeleteGroup($index)">
              <template #reference>
                <el-button link type="danger">删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </el-form>
    <TitleText class="report-dialog-title" title="其他协同力量" subTitle>
      <el-button type="primary" :icon="Plus" @click="onAddOther">手动添加</el-button>
    </TitleText>
    <el-form class="table-form" :model="otherFormData" ref="otherFormRef" label-suffix="：">
      <el-table :data="otherFormData.tableData" :max-height="540" border empty-text="请选择民警">
        <el-table-column type="index" label="序号" width="60" />
        <el-table-column label="类型" width="200">
          <template #default="{ row, $index }">
            <el-form-item :prop="`tableData.${$index}.lx`">
              <el-select v-model="row.lx" placeholder="请选择类型">
                <el-option v-for="item in RESOURCE_OPTIONS" :key="item" :label="item" :value="item" />
              </el-select>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="人数" width="200">
          <template #default="{ row, $index }">
            <el-form-item :prop="`tableData.${$index}.sbrs`">
              <el-input-number v-model="row.sbrs" :min="1">
                <template #suffix>人</template>
              </el-input-number>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="备注" min-width="200">
          <template #default="{ row, $index }">
            <el-form-item :prop="`tableData.${$index}.bz`">
              <el-input v-model="row.bz" type="textarea" :rows="1" />
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="60">
          <template #default="{ row, $index }">
            <el-popconfirm title="确认删除吗？" :hide-after="0" @confirm="onDeleteOther($index)">
              <template #reference>
                <el-button link type="danger">删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </el-form>
  </Dialog>
</template>

<script setup>
import { computed, ref, reactive } from 'vue';
import { RESOURCE_OPTIONS } from '@/views/DutyManage/config'
import { issuedApi } from '@/api/DutyManage'
import { PCS_MAP } from '@/config'
import { Plus } from '@element-plus/icons-vue'
import { uniqueId } from 'lodash'

const emits = defineEmits(['submited']);
const props = defineProps({
  name: {
    type: String,
    default: '',
  },
});

const visiable = ref(false);
const formType = ref('add'); // add, edit
const formTitle = computed(() => `${formType.value === 'add' ? '上报' : '编辑'}${props.name}`);

const leaderFormData = reactive({ tableData: [] });
const groupFormData = reactive({ tableData: [] });
const otherFormData = reactive({ tableData: [] });

const initFormData = (type, row) => {
  // if (type == 'add') leaderFormData = { zt: SECURITY_STATUS['启用'] };
  // if (type == 'edit') leaderFormData = { ...row };
}

const show = (type = 'add', row = null) => {
  formType.value = type;
  initFormData(type, row);
  visiable.value = true;
};

const onAddLeader = () => {
  leaderFormData.tableData.push({ zzmc: '科信科', mjjh: '302871', mjmc: '熊倡', mjhh: '2909', lxdh: '12345678901' });
}

const onAddGroup = () => {
  groupFormData.tableData.push({ zzmc: '科信科', mjjh: '302871', mjmc: '熊倡', lxdh: '12345678901' });
}

const onAddOther = () => {
  otherFormData.tableData.push({ lx: '', sbrs: 1, bz: '' });
}

const onDeleteLeader = index => {
  leaderFormData.tableData.splice(index, 1);
}

const onDeleteGroup = index => {
  groupFormData.tableData.splice(index, 1);
}

const onDeleteOther = index => {
  otherFormData.tableData.splice(index, 1);
}

const onSubmit = () => {
  setTimeout(() => {
    visiable.value = false;
    emits('submited')
  }, 2000);
}

defineExpose({ show });
</script>

<style lang="scss" scoped>
.report-dialog-title {
  margin: var(--ycy-gap-extra-large) 0 var(--ycy-gap-base) 0;
}

.table-form {
  .table-form-row-group {
    em {
      margin-right: calc(var(--ycy-gap-small) / 2);
      font-style: normal;
      font-weight: bold;
      // color: var(--el-color-primary);
    }

    .el-button {
      padding: 0;
      font-size: 12px;
      height: unset;
    }
  }
}
</style>